<template>
  <div>
    <div class="step">
      <div class="stepList" style="flex: 1; min-width: 130px; max-width: 130px">
        <div class="stepHeader">返品情况</div>
        <div>
          <el-select
            :disabled="type == 3 || type == 2"
            v-model="FormData.returnProductSituation"
            @change="nonchangeSelect"
            style="width: 100%"
            placeholder="请选择退货情况"
          >
            <el-option label="不需要返品" :value="1"></el-option>
            <el-option label="产品问题不能入库" :value="2"></el-option>
            <el-option label="有产品能入库" :value="3"></el-option>
          </el-select>
        </div>
      </div>
      <div class="stepList" style="flex: 2; max-width: 420px">
        <div class="stepHeader">sku费用(退给卖家)</div>
        <div>
          <!-- 不需要退货 产品问题不能入库-->
          <el-tabs key="awerto" v-model="FormData.sellerSkuFee" type="border-card">
            <el-tab-pane-ext :disabled="type == 2 || type == 3" name="1" label="选择退还产品费用">
              <template v-slot:content>
                <div style="display: flex; justify-content: flex-end; margin-right: 20px">
                  <el-button @click="addSkuFeeList" :disabled="type == 3 || type == 2" size="mini" type="text"
                    >新增</el-button
                  >
                </div>
                <el-table
                  :data="FormData.orderSkuReturnFeeList"
                  :sum-text="$t('合计')"
                  show-summary
                  :summary-method="handleSum"
                  height="400"
                >
                  <el-table-column prop="skuNo" align="center" :label="$t('sku')" width="100"> </el-table-column>
                  <el-table-column prop="image" align="center" width="50" :label="$t('图片')">
                    <template slot-scope="scope">
                      <div>
                        <el-image
                          style="width: 30px; height: 30px"
                          :src="item"
                          :preview-src-list="scope.row.imgUrl.split(',')"
                          v-for="(item, index) in scope.row.imgUrl.split(',')"
                          fit="fit"
                        ></el-image>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="num" width="50" align="center" :label="$t('数量')"> </el-table-column>
                  <el-table-column prop="applyPrice" width="70" align="center" :label="$t('申请价格')">
                    <template slot-scope="scope">
                      {{ Number(scope.row.applyPrice).toFixed(0) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="total" width="50" align="center" :label="$t('总价')"> </el-table-column>
                  <el-table-column prop="undertakeDistrType" width="90" align="center" :label="$t('承担')">
                    <template slot-scope="scope">
                      <el-select
                        :disabled="type == 3 || type == 2"
                        v-model="scope.row.undertakeDistrType"
                        style="width: 80px"
                        size="mini"
                      >
                        <el-option label="平台" :value="2"> </el-option>
                        <el-option label="供应商" :value="1"> </el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="50" :label="$t('操作')">
                    <template slot-scope="scope">
                      <el-popconfirm
                        @confirm="deleteExpense(scope.row)"
                        :disabled="type == 3 || type == 2"
                        :title="$t('确定删除?')"
                      >
                        <el-link type="danger" slot="reference" :underline="false">
                          <el-button :disabled="type == 3 || type == 2" size="mini" type="text"
                            >{{ $t('删除') }}
                          </el-button>
                        </el-link>
                      </el-popconfirm>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-tab-pane-ext>
            <el-tab-pane-ext
              :disabled="type == 2 || type == 3"
              name="0"
              v-if="FormData.returnProductSituation != 3"
              label="不退还"
            ></el-tab-pane-ext>
          </el-tabs>
        </div>
      </div>
      <!-- 运费包裹承担者 -->
      <div class="stepList" style="max-width: 230px">
        <div class="stepHeader">运费/捆包(退给卖家)</div>
        <div>
          <el-tabs key="awera" v-model="FormData.sellerFreightBaleFee" type="border-card">
            <el-tab-pane-ext :disabled="type == 2 || type == 3" name="1" label="运费捆包退还">
              <template v-slot:content>
                <div class="bandingMachine">
                  <div>承担：</div>
                  <el-select
                    :disabled="type == 3 || type == 2"
                    v-model="FormData.undertakeFreightBaleFee"
                    style="width: 100px"
                    size="mini"
                  >
                    <el-option label="平台" value="1"> </el-option>
                    <el-option label="供应商" value="2"> </el-option>
                  </el-select>
                </div>
                <div class="bandingMachine">
                  <div>运费：</div>
                  <el-input
                    v-model="FormData.freightFee"
                    :disabled="type == 3 || type == 2"
                    style="width: 50px"
                    size="mini"
                  ></el-input>
                </div>
                <div class="bandingMachine">
                  <div>捆包：</div>
                  <el-input
                    v-model="FormData.baleFee"
                    :disabled="type == 3 || type == 2"
                    style="width: 50px"
                    size="mini"
                  ></el-input>
                </div>
                <div
                  class="bandingMachine"
                  v-if="FormData.undertakeFreightBaleFee == 2"
                  style="display: flex; align-items: center; padding: 4px 2px; border-radius: 2px"
                >
                  <div>供应商列表：</div>
                  <el-select
                    style="width: 100px"
                    :disabled="type == 3 || type == 2"
                    v-model="FormData.undertakeDistrId"
                    size="mini"
                  >
                    <el-option
                      :label="item.distrName"
                      :value="item.distrId"
                      :key="item.distrId"
                      v-for="(item, idnex) in supplierList"
                    >
                    </el-option>
                  </el-select>
                </div>
              </template>
            </el-tab-pane-ext>
            <el-tab-pane-ext :disabled="type == 2 || type == 3" name="0" label="不退还"></el-tab-pane-ext>
          </el-tabs>
        </div>
      </div>
      <div class="stepList" style="flex: 1; max-width: 196px">
        <div class="stepHeader">手续费返还</div>
        <div>
          <el-tabs key="awertz" v-model="FormData.isHandlingFeeReturn" type="border-card">
            <el-tab-pane-ext :disabled="type == 2 || type == 3" name="1" label="手续费返还">
              <template v-slot:content>
                <div style="display: flex; align-items: center; width: 100%; padding: 10px">
                  <div>手续费退还：</div>
                  <el-input
                    v-model="FormData.handlingFeeReturn"
                    :disabled="type == 3 || type == 2"
                    style="width: 80px"
                    size="mini"
                  ></el-input>
                </div>
              </template>
            </el-tab-pane-ext>
            <el-tab-pane-ext :disabled="type == 2 || type == 3" name="0" label="不返还"></el-tab-pane-ext>
          </el-tabs>
        </div>
      </div>
      <div class="stepList" style="flex: 2; max-width: 330px" v-if="FormData.returnProductSituation == 3">
        <div class="stepHeader">入库</div>
        <div>
          <!--入库情况1-->
          <el-tabs key="awert" v-model="FormData.isWarehouse" type="border-card">
            <el-tab-pane-ext :disabled="type == 2 || type == 3" name="1" label="选择入库产品">
              <template v-slot:content>
                <div style="display: flex; justify-content: flex-end; margin-right: 20px">
                  <el-button @click="addWarehousedProduct" :disabled="type == 3 || type == 2" size="mini" type="text"
                    >新增</el-button
                  >
                </div>
                <el-table :data="FormData.orderSkuWarehouseSkuList" height="400">
                  <el-table-column prop="skuNo" align="center" :label="$t('sku')" width="106"> </el-table-column>
                  <el-table-column prop="imgUrl" align="center" width="50" :label="$t('图片')">
                    <template slot-scope="scope">
                      <el-image
                        v-if="scope.row && scope.row.imgUrl"
                        style="width: 30px; height: 30px"
                        :src="scope.row.imgUrl"
                        fit="fit"
                      ></el-image>
                    </template>
                  </el-table-column>
                  <el-table-column prop="num" width="70" align="center" :label="$t('数量')"> </el-table-column>
                  <el-table-column prop="price" width="50" align="center" :label="$t('序列号')">
                    <template slot-scope="scope">
                      <!-- <el-button
                          v-if="
                            (type == 2 && scope.row.serializableVoList.length == 0) ||
                            (type == 2 && scope.row.serializableVoList == null)
                          "
                          @click="allocationSequence(scope.row)"
                          size="mini"
                          type="text"
                          >分配</el-button
                        > -->
                      <div v-if="type == 1">
                        {{ scope.row.serializableVoList ? scope.row.serializableVoList.length : 0 }}
                      </div>
                      <div v-else>
                        <el-popconfirm
                          v-if="
                            (type == 2 && scope.row.serializableVoList.length == 0) ||
                            (type == 2 && scope.row.serializableVoList == null)
                          "
                          @confirm="allocationSequence(scope.row)"
                          :title="$t('确认分配?')"
                        >
                          <el-button slot="reference" type="text" size="small">
                            {{ $t('分配') }}
                          </el-button>
                        </el-popconfirm>
                        <el-link :underline="false" v-else @click="handleDiliverDetail(scope.row)" type="success">{{
                          scope.row.serializableVoList ? scope.row.serializableVoList.length : 0
                        }}</el-link>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" width="50" :label="$t('操作')">
                    <template slot-scope="scope">
                      <el-popconfirm
                        @confirm="deleteWarehousedProduct(scope.row)"
                        :disabled="type == 3 || type == 2"
                        :title="$t('确定删除?')"
                      >
                        <el-link type="danger" slot="reference" :underline="false">
                          <el-button :disabled="type == 3 || type == 2" size="mini" type="text"
                            >{{ $t('删除') }}
                          </el-button>
                        </el-link>
                      </el-popconfirm>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-tab-pane-ext>
          </el-tabs>
        </div>
      </div>
    </div>
    <!-- 入库产品弹框 -->
    <el-dialog
      width="800px"
      title="入库选择"
      destroy-on-close
      append-to-body
      :visible.sync="WarehousedProduct"
      :before-close="closeDialogSku"
    >
      <div class="serialNumber">
        <div>
          <el-input v-model="queryPamers.skuNo" style="width: 220px" size="mini"></el-input>
          <el-button type="primary" size="mini" style="margin: 0 20px 0 10px" @click="SkgetSkuListNoPage"
            >搜索</el-button
          >
          <!-- <el-radio-group v-model="radio" @input="checkInput">
            <el-radio label="1">从订单里面选</el-radio>
            <el-radio label="2">从所有sku里面选</el-radio>
          </el-radio-group> -->
        </div>
        <div style="display: flex; justify-content: space-between; padding: 20px 0">
          <el-card class="serialNumberList">
            <el-table :data="WarehousedProductList" :height="radio == 1 ? '420px ' : ''">
              <el-table-column prop="skuNo" align="center" width="120" :label="$t('sku')"> </el-table-column>
              <el-table-column prop="imgUrl" align="center" width="50" :label="$t('图片')">
                <template slot-scope="scope">
                  <el-image
                    v-if="scope.row && scope.row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
                    style="width: 30px; height: 30px"
                    :src="scope.row.imgUrl"
                    fit="fit"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column align="center" :label="$t('操作')">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="selectSerialNumber(scope.row)">选择</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-if="radio == 2"
              :pager-count="5"
              @current-change="handleCurrentChange"
              small
              layout="prev, pager, next"
              :total="queryPamers.total"
            >
            </el-pagination>
          </el-card>
          <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
            <div style="font-size: 60px; font-weight: bold">→</div>
          </div>
          <el-card class="serialNumberCheck">
            <el-table :data="GoodsInStorage" height="400">
              <el-table-column prop="skuNo" align="center" :label="$t('sku')" width="106"> </el-table-column>
              <el-table-column prop="imgUrl" align="center" width="50" :label="$t('图片')">
                <template slot-scope="scope">
                  <el-image
                    v-if="scope.row && scope.row.imgUrl"
                    style="width: 30px; height: 30px"
                    :src="scope.row.imgUrl"
                    fit="fit"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column prop="num" width="70" align="center" :label="$t('数量')">
                <template slot-scope="scope">
                  <el-input :disabled="type == 3 || type == 2" v-model="scope.row.num" size="mini"></el-input>
                </template>
              </el-table-column>

              <el-table-column width="50" align="center" :label="$t('操作')">
                <template slot-scope="scope">
                  <el-button
                    :disabled="type == 3 || type == 2"
                    size="mini"
                    type="text"
                    @click="deleteproductHome(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitList">{{ $t('确定') }}</el-button>
        <el-button @click="closeDialogSku">{{ $t('取消') }}</el-button>
      </div>
    </el-dialog>
    <!-- 问题选择弹框 -->
    <el-dialog
      width="800px"
      title="问题sku选择"
      destroy-on-close
      append-to-body
      :visible.sync="orderSkuReturnFeeListSelect"
      :before-close="closeDialogSkuReturnFee"
    >
      <div style="display: flex; justify-content: space-between; padding: 20px 0">
        <el-card class="serialNumberList">
          <el-table :data="FormData.orderSkuApplyList" :height="radio == 1 ? '420px ' : ''">
            <el-table-column prop="skuNo" align="center" width="120" :label="$t('sku')"> </el-table-column>
            <el-table-column prop="imgUrl" align="center" width="50" :label="$t('图片')">
              <template slot-scope="scope">
                <el-image
                  v-if="scope.row && scope.row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
                  style="width: 30px; height: 30px"
                  :src="scope.row.imgUrl"
                  fit="fit"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('操作')">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="selectSkuFee(scope.row)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <div style="display: flex; flex-direction: column; justify-content: center; align-items: center">
          <div style="font-size: 60px; font-weight: bold">→</div>
        </div>
        <el-card class="serialNumberCheck">
          <el-table :data="SkuFeeStorage" height="400">
            <el-table-column prop="skuNo" align="center" :label="$t('sku')" width="106"> </el-table-column>
            <el-table-column prop="imgUrl" align="center" width="50" :label="$t('图片')">
              <template slot-scope="scope">
                <el-image
                  v-if="scope.row && scope.row.imgUrl"
                  style="width: 30px; height: 30px"
                  :src="scope.row.imgUrl"
                  fit="fit"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="num" width="70" align="center" :label="$t('数量')"> </el-table-column>

            <el-table-column width="50" align="center" :label="$t('操作')">
              <template slot-scope="scope">
                <el-button
                  :disabled="type == 3 || type == 2"
                  size="mini"
                  type="text"
                  @click="deleteSkuBackFee(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSkuFeeList">{{ $t('确定') }}</el-button>
        <el-button @click=";(SkuFeeStorage = []), (orderSkuReturnFeeListSelect = false)">{{ $t('取消') }}</el-button>
      </div>
    </el-dialog>
    <!-- 分配列表弹框 -->
    <!-- 分配列表 -->
    <el-dialog
      class="myDialog"
      :before-close="allocationFlageClose"
      :visible.sync="allocationFlage"
      :title="$t('分配列表')"
      width="800px"
      append-to-body
      destroy-on-close
      :close-on-click-modal="false"
    >
      <div class="scanStatus">
        <QR
          :title="$t('详情')"
          width="74"
          height="74"
          :dialogVisible="diliverInfo.show"
          :barcodeNum="diliverInfo.qrData"
          @handleClose="diliverInfo.show = false"
        />
        <el-row style="margin-bottom: 20px">
          <el-col :offset="1" :span="7">
            <div class="goods-img-box">
              <el-image
                fit="contain"
                style="width: 60px; height: 60px; object-fit: cover"
                class="goods-img-mini"
                :src="QuantityReceived.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
              />
            </div>
          </el-col>
          <el-col :offset="1" :span="7">
            <el-row style="margin-bottom: 20px"> {{ $t('sku编号') }}:{{ QuantityReceived.skuNo }}</el-row>
            <el-row style="margin-bottom: 20px"> {{ $t('库位号') }}:{{ QuantityReceived.stockPositionNo }}</el-row>
            <el-row> {{ $t('是否会过期') }}:{{ QuantityReceived.isExpired == 1 ? '是' : '否' }}</el-row>
          </el-col>
          <el-col :offset="1" :span="7">
            <el-row> {{ $t('序列号数量') }}:{{ QuantityReceived.serializableNum }}</el-row>
          </el-col>
        </el-row>
        <el-row style="margin: 5px 0">
          <el-button
            style="margin: 0 5px 0 0"
            :disabled="diliverInfo.tableCheck.length == 0"
            type="primary"
            plain
            size="mini"
            @click="printQrCode"
          >
            {{ $t('打印二维码') }}
          </el-button>
          <el-popconfirm
            v-if="handleDiliverDetailControl"
            style="margin: 0 5px 0 0"
            @confirm="distributionSerialNumContinue"
            :title="$t('是否继续分配?')"
          >
            <el-button type="success" :disabled="type == 3" slot="reference" plain size="mini">
              {{ $t('继续分配') }}
            </el-button>
          </el-popconfirm>
          <el-radio-group v-model="isPage" @change="resetSelectData">
            <el-radio label="1">{{ $t('不分页') }}</el-radio>
            <el-radio label="2">{{ $t('分页') }}</el-radio>
          </el-radio-group>
          <el-button
            :disabled="type == 3"
            v-show="handleDiliverDetailControl"
            type="text"
            v-hasPermi="['distribution:orderQuestionApply:setIsExpiredTime']"
            style="float: right"
            @click="subExpirationTime(1, null)"
            >设置全部过期时间</el-button
          >
        </el-row>
        <!-- 不分页列表 -->
        <v-list
          class="VList"
          v-if="isPage == 1"
          @rowSelect="(rows) => (diliverInfo.tableCheck = rows)"
          :list-data="diliverInfo.data"
          :prop="[
            { name: $t('序号'), prop: 'indexNo', style: { flex: 0.6 } },
            { name: $t('序列号'), prop: 'serializable', style: { flex: 1.5 } },
            { name: $t('过期时间'), prop: 'isExpiredTime' },
            // { name: $t('装箱情况'), prop: 'isBox' },
            // { name: $t('出库情况'), prop: 'isOutWarehouse' },
            // { name: $t('上架情况'), prop: 'isOnShelf' },
            {
              name: $t('操作'),
              prop: [
                {
                  name: $t('删除'),
                  style: 'color:red;',
                  permission: ['distribution:purchase:remove'],
                  click: deleteDistr,
                  disabled: (row) => row.isOnShelf == 1 || type == 3,
                },
                {
                  name: $t('过期时间'),
                  permission: ['distribution:orderQuestionApply:setIsExpiredTime'],
                  click: (row) => {
                    subExpirationTime(0, row)
                  },
                  disabled: (row) => type == 3,
                },
              ],
            },
          ]"
          :view-count="20"
        >
        </v-list>
        <!-- 分页列表 -->
        <div v-if="isPage == 2" class="PagingList">
          <el-table
            height="526"
            @selection-change="(rows) => (diliverInfo.tableCheck = rows)"
            ref="TableRef"
            :data="diliverInfo.pageData"
          >
            <el-table-column align="center" type="selection" />
            <!-- 序号 -->
            <el-table-column :label="$t('序号')" align="center" width="70" show-overflow-tooltip prop="serial" />
            <!-- 序列号 -->
            <el-table-column align="center" prop="serializable" width="260" :label="$t('序列号')" />
            <!-- 过期时间 -->
            <el-table-column align="center" prop="isExpiredTime" :label="$t('过期时间')">
              <template slot-scope="scope">{{ scope.row.isExpired == 0 ? '-' : scope.row.isExpiredTime }} </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" width="120" :label="$t('操作')">
              <template slot-scope="{ row }">
                <div style="display: flex; justify-content: space-between; width: 100%">
                  <el-button
                    :disabled="type == 3"
                    style="padding: 0"
                    type="text"
                    v-hasPermi="['distribution:purchase:remove']"
                    @click="deleteDistr(row)"
                  >
                    <span style="color: red">
                      {{ $t('删除') }}
                    </span>
                  </el-button>
                  <el-button
                    :disabled="type == 3"
                    type="text"
                    v-hasPermi="['distribution:purchase:setIsExpiredTime']"
                    @click="subExpirationTime(0, row)"
                  >
                    {{ $t('过期时间') }}
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="diliverInfo.pageTotal > 0"
            :total="diliverInfo.pageTotal"
            :page-sizes="[20, 30, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]"
            :page.sync="diliverInfo.queryParams.pageNum"
            :limit.sync="diliverInfo.queryParams.pageSize"
            @pagination="getPageDiliverList"
          />
        </div>
      </div>
      <!-- 设置时间 -->
      <el-dialog
        append-to-body
        :before-close="cancelExpirationTime"
        :visible.sync="ExpirationTime"
        :title="$t('设置序列号过期时间')"
        width="300px"
        destroy-on-close
        :close-on-click-modal="false"
      >
        <div style="width: 100%; text-align: center">
          <el-date-picker
            v-model="QuantityReceived.ExpirationTimevalue"
            value-format="yyyy-M-dd"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
        <div slot="footer">
          <el-button @click="cancelExpirationTime">{{ $t('取消') }}</el-button>
          <el-button type="primary" @click="setExpirationTime">{{ $t('确认') }}</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { Loading } from 'element-ui'
import handleTableSum from '@/utils/handleSum'

import {
  setIsExpiredTime,
  getSkuDistributorByType,
  getSkuListNoPage,
  createSkuSerializableList,
  getOrderWarehouseSerializableList,
  getOrderWarehouseSerializableListByPage,
  deleteOrderWarehouseSerializable,
  getOrderWarehouseSerializableInfo,
} from '@/api/orderManage/orderIssuesApplyList'
import QR from '@/components/QrCode/newcode.vue'
import VList from '@/components/v-list/index.vue'
export default {
  name: 'ErpDistributionPlusWebApprovalRefund',
  props: {
    curentData: {},
    /**审批类型(1:审核，2完成处理，3详情) */
    type: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {
      handleDiliverDetailControl: true,
      /**设置过期时间 */
      ExpirationTime: false,
      GoodsInStorage: [], //入库产品缓存
      radio: '1', //入库新增控制滚动
      WarehousedProduct: false, //入库产品弹框
      orderSkuReturnFeeListSelect: false, //问题sku选择弹框
      SkuFeeStorage: [], //sku问题列表选择的缓存
      WarehousedProductList: [], //序列号选择列表
      queryPamers: {
        pageSize: 10,
        pageNum: 1,
        skuNo: '',
        total: 0,
      }, //入库选择的分页条件查询
      supplierList: [], //相关供应商的列表
      FormData: {
        returnProductSituation: '', //返品情况
        sellerSkuFee: '', //sku费用是否退还
        sellerFreightBaleFee: '', //运费捆包是否退还
        undertakeFreightBaleFee: '', //运费捆包退还的承担者
        isHandlingFeeReturn: '', //手续费是否返还
        isWarehouse: '', //是否入库

        processingMethod: 0, //订单处理方式
        handlingFeeReturn: '', //手续费

        remark: '', //备注
        freightFee: 0, //运费
        baleFee: 0, //捆包费
        undertakeDistrId: '', //选择供应商时需要传这个id
        orderSkuReturnFeeList: [], //退费sku列表
        orderSkuWarehouseSkuList: [], //入库sku列表
      },
      /******************************序列号详情分割线************************************** */
      isPage: '1',
      diliverInfo: {
        qrData: [],
        tableCheck: [],
        show: false,
        data: [],
        /**分页数据 */
        pageData: [],
        pageTotal: 0,

        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          purchaseId: '',
          skuId: '',
        },
      },
      allocationFlage: false,
      // 收货数量
      QuantityReceived: {
        receiveGoodsNum: 0,
        ExpirationTimevalue: '',
      },
      loadingInstance: '',
    }
  },

  mounted() {},
  components: { QR, VList },
  methods: {
    handleSum(param) {
      /**
       * 需要进行统计的字段
       */
      const data = handleTableSum(param, ['num', 'applyPrice', 'total'], '合计', 0)
      return data
    },
    isShowControl(data, flage) {
      this.handleDiliverDetailControl = flage
      this.handleDiliverDetail(data)
    },
    cancelExpirationTime() {
      this.ExpirationTime = false
      this.QuantityReceived.ExpirationTimevalue = ''
      this.QuantityReceived.serializableIdList = []
    },
    setExpirationTime() {
      setIsExpiredTime({
        setAll: this.QuantityReceived.setAll,
        skuId: this.QuantityReceived.skuId,
        businessId: this.FormData.id,
        isExpiredTime: this.QuantityReceived.ExpirationTimevalue,
        serializableIdList: this.QuantityReceived.serializableIdList,
      }).then((res) => {
        this.ExpirationTime = false
        this.QuantityReceived.ExpirationTimevalue = ''
        this.QuantityReceived.serializableIdList = []
        this.$message.success(res.msg)

        if (this.isPage == 1) {
          this.relaodSkuList()
        } else if (this.isPage == 2) {
          this.getPageDiliverList()
        }
      })
    } /**设置过期时间 */,
    subExpirationTime(type, data) {
      this.ExpirationTime = !this.ExpirationTime
      this.QuantityReceived.setAll = type
      if (data != null) {
        this.QuantityReceived.serializableIdList = [data.id]
        this.$set(this.QuantityReceived, 'ExpirationTimevalue', data.isExpiredTime != '-' ? data.isExpiredTime : '')
      }
      if (this.QuantityReceived.ExpirationTimevalue == '-') {
        this.QuantityReceived.ExpirationTimevalue = ''
      }
    },
    /**********************************序列号详情分割线********************************************** */
    // 关闭已分配弹框
    allocationFlageClose() {
      this.isPage = '1'
      this.diliverInfo = {
        qrData: [],
        tableCheck: [],
        show: false,
        data: [],
        /**分页数据 */
        pageData: [],
        pageTotal: 0,

        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          purchaseId: '',
          skuId: '',
        },
      }
      this.allocationFlage = !this.allocationFlage
    },
    // 继续分配
    distributionSerialNumContinue() {
      createSkuSerializableList({
        skuId: this.QuantityReceived.skuId,
        num: -1,
        orderApplyId: this.FormData.id,
      }).then((res) => {
        this.$emit('relaod')
        this.$message({
          type: 'success',
          message: '分配成功',
        })
        if (this.isPage == 1) {
          this.relaodSkuList()
        } else if (this.isPage == 2) {
          this.getPageDiliverList()
        }
      })
    },
    resetSelectData(e) {
      // console.log(` ==>`, JSON.parse(JSON.stringify(e)));
      this.diliverInfo.tableCheck = []
      if (e == 2) {
        this.getPageDiliverList()
        this.diliverInfo.data.forEach((i) => (i.check = false))
      } else {
        this.relaodSkuList()
      }
    },
    // 删除序序列号
    deleteDistr(value) {
      this.$confirm(this.$t('确定删除?'), this.$t('提示'), {
        type: 'warning',
      }).then(() => {
        deleteOrderWarehouseSerializable(value.id).then((res) => {
          const { code, data, msg } = res
          if (code == 200) {
            this.$message({ type: 'success', message: msg })

            if (this.isPage == 1) {
              this.relaodSkuList()
            } else if (this.isPage == 2) {
              this.getPageDiliverList()
            }
            this.$emit('relaod')
          }
        })
      })
    },
    /**查询分页分配列表 */
    getPageDiliverList() {
      getOrderWarehouseSerializableListByPage(this.diliverInfo.queryParams).then((res) => {
        const { code, rows, total } = res
        if (code === 200) {
          this.diliverInfo.pageData = rows
          this.diliverInfo.pageData.forEach((item) => {
            if (this.QuantityReceived.isExpired == 0) {
              item.isExpiredTime = '-'
            } else {
              item.isExpiredTime = item.isExpiredTime.split(' ')[0]
            }
          })
          this.diliverInfo.pageTotal = total
        }
      })
    },
    relaodSkuList() {
      getOrderWarehouseSerializableList(this.diliverInfo.queryParams).then((res) => {
        this.handleVListData(res.data)
      })
      /**获取在入库信息 */
      getOrderWarehouseSerializableInfo({
        businessId: this.FormData.id,
        skuId: this.QuantityReceived.skuId,
      }).then((res) => {
        this.QuantityReceived = res.data
      })
    },
    /**
     * 处理虚拟表格数据
     */
    handleVListData(data) {
      this.diliverInfo.data = data.map((item, index) => {
        const { isOutWarehouse, isOnShelf, isBox } = item
        /************************出库情况***********************/
        let isOutWarehouseText, isOutWarehouseStyle
        if (isOutWarehouse == 0) {
          isOutWarehouseText = '未出库'
          isOutWarehouseStyle = { color: 'red' }
        } else if (isOutWarehouse == 1) {
          isOutWarehouseText = '已出库'
          isOutWarehouseStyle = { color: '#13ce66' }
        }
        /************************出库情况 end***********************/

        /************************上架情况***********************/
        let isOnShelfText, isOnShelfStyle
        if (isOnShelf == 0) {
          isOnShelfText = '未上架'
          isOnShelfStyle = { color: 'red' }
        } else if (isOnShelf == 1) {
          isOnShelfText = '已上架'
          isOnShelfStyle = { color: '#13ce66' }
        }
        /************************上架情况 end ***********************/

        /************************装箱情况***********************/
        let isBoxText, isBoxStyle
        // 是否装箱 0-否 1-是
        if (isBox == 0) {
          isBoxText = '否'
          isBoxStyle = { color: 'red' }
        } else if (isBox == 1) {
          isBoxText = '是'
          isBoxStyle = { color: '#13ce66' }
        }
        /**过期时间处理 */
        if (item.isExpired == 0 || item.isExpired == null) {
          item.isExpiredTime = '-'
        } else {
          item.isExpiredTime = item.isExpiredTime?.split(' ')[0]
        }
        /************************装箱情况 end ***********************/
        return {
          ...item,
          index,
          indexNo: index + 1,
          idText: item.id,
          isOutWarehouseText,
          isOutWarehouseStyle,
          isOnShelfText,
          isOnShelfStyle,
          isBoxText,
          isBoxStyle,
          check: false,
        }
      })
    },
    startLoading() {
      this.loadingInstance = Loading.service({
        text: 'Loading...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)',
      })
    },
    endLoading() {
      this.loadingInstance?.close()
    },
    /**当前年月日 */
    getCurrentDate(format) {
      const currentDate = new Date() // 创建一个Date对象来表示当前日期和时间
      const year = currentDate.getFullYear() // 获取当前年份
      const month = currentDate.getMonth() + 1 // 获取当前月份（注意：月份从0开始，所以要加1）
      const day = currentDate.getDate() // 获取当前日期（天）

      // 如果你需要获取其他时间信息，比如小时、分钟、秒，也可以继续使用Date对象的方法

      // 返回一个包含年、月、日的字符串
      return `${year}${format}${month}${format}${day}`
    },
    printQrCode() {
      this.startLoading()
      let cunrentData = this.getCurrentDate('/')
      const data = JSON.parse(JSON.stringify(this.diliverInfo.tableCheck))
      this.diliverInfo.qrData = data.map((i) => {
        return {
          ...i,
          id: i.serializable,
          skuNo: i.skuNo,
          left: cunrentData,
          right: this.isPage == '1' ? 'No:' + i.indexNo : 'No:' + i.serial,
          top: i.stockPositionNo || '没有',
        }
      })

      this.endLoading()
      setTimeout(() => {
        this.diliverInfo.show = true
      }, 500)
    },
    /**分配详情 */
    handleDiliverDetail(row) {
      const { id, skuId } = row
      /********************分配详情********************/
      this.diliverInfo.queryParams.businessId = this.FormData.id
      this.diliverInfo.queryParams.skuId = skuId
      /********************分配详情end********************/
      this.QuantityReceived = row

      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)',
      })
      //不分页列表
      getOrderWarehouseSerializableList({ businessId: this.FormData.id, skuId: row.skuId }).then((res) => {
        loading.close()
        this.allocationFlage = !this.allocationFlage
        this.handleVListData(res.data)
      })
      /**获取在入库信息 */
      getOrderWarehouseSerializableInfo({ businessId: this.FormData.id, skuId: row.skuId }).then((res) => {
        this.QuantityReceived = res.data
        this.QuantityReceived.num = row.num
      })
    },
    /*********************************序列号详情分割线***********************************************************/
    /**分配序列号 */
    allocationSequence(row) {
      createSkuSerializableList({
        skuId: row.skuId,
        num: row.num,
        orderApplyId: this.FormData.id,
      }).then((res) => {
        this.$emit('relaod')
        this.$message({
          type: 'success',
          message: '分配成功',
        })
      })
    },
    /**首次审批前，前端赋初始值 */
    initFirstFormData() {
      /**拷贝sku费用 */
      this.FormData.orderSkuReturnFeeList = JSON.parse(JSON.stringify(this.FormData.orderSkuApplyList))
      this.FormData.orderSkuReturnFeeList.forEach((item) => {
        item.undertakeDistrType = 1
      })
    },
    /**首次审批跟具切换返品情况默认值 */
    nonchangeSelect() {
      /**只有在第一次审核时切换才会联动后面是更具数据变化回显 */
      if (this.FormData.status == 1 && this.FormData.returnProductSituation == 1) {
        this.FormData.sellerSkuFee = '1'
      } else if (this.FormData.status == 1 && this.FormData.returnProductSituation == 2) {
        this.FormData.sellerSkuFee = '0'
      }
      if (this.FormData.returnProductSituation == 3) {
        this.FormData.sellerSkuFee = '0'
      }
      if (this.FormData.status == 1) {
        this.FormData.sellerFreightBaleFee = '1'
        this.FormData.undertakeFreightBaleFee = '1'
        this.FormData.freightFee = '0'
        this.FormData.baleFee = '0'
        this.FormData.isHandlingFeeReturn = '1'
        this.FormData.handlingFeeReturn = '0'
        this.FormData.orderSkuWarehouseSkuList = []
      }
      if (this.FormData.returnProductSituation == 3) {
        this.FormData.isWarehouse = '1'
        this.FormData.sellerSkuFee = '1'
      } else {
        this.FormData.isWarehouse = '0'
      }
    },

    /**获取相关供应商sku */
    getsupplier() {
      getSkuDistributorByType({ id: this.FormData.id }).then((res) => {
        this.supplierList = res.data
      })
      this.nonchangeSelect()
    },
    /**选择退费问题sku */
    selectProblemSku(row) {
      let flage = false
      this.FormData.orderSkuReturnFeeList?.forEach((item) => {
        if (item.skuNo == row.skuNo) {
          flage = true
        }
      })
      if (flage) {
        this.$notify.error({
          title: '错误',
          message: '入库列表里存在' + row.skuNo + '请处理后再操作',
        })
      } else {
        this.FormData.orderSkuReturnFeeList.push(row)
      }
    },
    /**删除sku退费 */
    deleteExpense(row) {
      let deletIndex = ''
      this.FormData.orderSkuReturnFeeList.forEach((item, index) => {
        if (item.skuNo == row.skuNo) {
          deletIndex = index
        }
      })
      this.FormData.orderSkuReturnFeeList.splice(deletIndex, 1)
    },
    /**删除入库产品 */
    deleteWarehousedProduct(row) {
      let deletIndex = ''
      this.FormData.orderSkuWarehouseSkuList.forEach((item, index) => {
        if (item.skuNo == row.skuNo) {
          deletIndex = index
        }
      })
      this.FormData.orderSkuWarehouseSkuList.splice(deletIndex, 1)
    },
    /**sku入库选择列表 */
    handleCurrentChange(page) {
      this.queryPamers.pageNum = page
      this.SkgetSkuListNoPage()
    },
    /**获取sku入库列表 */
    SkgetSkuListNoPage() {
      this.radio = '2'
      getSkuListNoPage(this.queryPamers).then((res) => {
        this.WarehousedProductList = res.rows
        this.queryPamers.total = res.total
      })
    },
    /**确认添加暂存到sku退费列表里 */
    submitSkuFeeList() {
      this.FormData.orderSkuReturnFeeList = this.FormData.orderSkuReturnFeeList.concat(
        JSON.parse(JSON.stringify(this.SkuFeeStorage)),
      )
      /**清空sku弹框缓存 */
      this.SkuFeeStorage = []
      this.orderSkuReturnFeeListSelect = false
    },
    /**确认添加暂存到入库列表里 */
    submitList() {
      console.log(this.FormData.orderSkuWarehouseSkuList)
      this.FormData.orderSkuWarehouseSkuList = this.FormData.orderSkuWarehouseSkuList.concat(
        JSON.parse(JSON.stringify(this.GoodsInStorage)),
      )
      this.queryPamers.total = this.WarehousedProductList.length
      this.closeDialogSku()
    },
    /**入库选择关闭 */
    closeDialogSku() {
      this.radio = '1'
      this.WarehousedProduct = false
      this.queryPamers = {
        pageSize: 10,
        pageNum: 1,
        skuNo: '',
        total: 0,
      }
      this.GoodsInStorage = []
      this.WarehousedProductList = []
    },
    /**sku列表选择关闭 */
    closeDialogSkuReturnFee() {
      this.orderSkuReturnFeeListSelect = false
      this.GoodsInStorage = []
      this.WarehousedProductList = []
    },
    /**sku退费选择 */
    selectSkuFee(row) {
      let flage = false
      this.FormData.orderSkuReturnFeeList?.forEach((item) => {
        if (item.skuNo == row.skuNo) {
          flage = true
        }
      })

      if (flage) {
        this.$notify.error({
          title: '错误',
          message: '入库列表里存在' + row.skuNo + '请处理后再操作',
        })
      } else {
        this.$prompt(`请输入产品数量(最大值:${row.num})`, '数量', {
          confirmButtonText: '确定',
          inputValidator: (value) => {
            // 点击按钮时，对文本框里面的值进行验证
            if (value < 1) {
              return '最小数量为1'
            } else if (!/^\d+$/.test(value)) {
              return '只能输入数字'
            }
          },
        }).then(({ value }) => {
          if (value > row.num) {
            this.$notify.error({
              title: '错误',
              message: '超出最大申请数量',
            })
          } else {
            let flages = false
            this.SkuFeeStorage.forEach((item) => {
              if (item.skuNo == row.skuNo) {
                flages = true
              }
            })
            if (flages) {
              this.$notify.error({
                title: '错误',
                message: '请勿重复选择',
              })
            } else {
              let data = JSON.parse(JSON.stringify(row))
              data.num = Number(value)
              data.undertakeDistrType = 1
              console.log(this.SkuFeeStorage, 'sssss')
              this.SkuFeeStorage.push(data)
            }
          }
        })
      }
    },
    /**入库选择 */
    checkInput(type) {
      if (type == 1) {
        this.WarehousedProductList = JSON.parse(JSON.stringify(this.FormData.orderSkuApplyList))
      } else if (type == 2) {
        this.SkgetSkuListNoPage()
      }
    },
    /**选择序列号 */
    selectSerialNumber(row) {
      let flage = false
      this.FormData.orderSkuWarehouseSkuList?.forEach((item) => {
        if (item.skuNo == row.skuNo) {
          flage = true
        }
      })

      if (flage) {
        this.$notify.error({
          title: '错误',
          message: '入库列表里存在' + row.skuNo + '请处理后再操作',
        })
      } else {
        this.$prompt(`请输入入库产品数量`, '数量', {
          confirmButtonText: '确定',
          inputValidator: (value) => {
            // 点击按钮时，对文本框里面的值进行验证
            if (value < 1) {
              return '最小数量为1'
            } else if (!/^\d+$/.test(value)) {
              return '只能输入数字'
            }
          },
        }).then(({ value }) => {
          row.num = Number(value)
          row.orderQuestionApplyId = this.FormData.id
          let flages = false
          this.GoodsInStorage.forEach((item) => {
            if (item.skuNo == row.skuNo) {
              flages = true
            }
          })
          if (flages) {
            this.$notify.error({
              title: '错误',
              message: '请勿重复选择',
            })
          } else {
            this.GoodsInStorage.push(row)
          }
        })
      }
    },
    /**显示问题sku选择弹框 */
    addSkuFeeList() {
      this.orderSkuReturnFeeListSelect = true
    },
    /**删除问题sku添加的缓存列表 */
    deleteSkuBackFee(row) {
      let deletIndex = ''
      this.SkuFeeStorage.forEach((item, index) => {
        if (item.skuNo == row.skuNo) {
          deletIndex = index
        }
      })
      this.SkuFeeStorage.splice(deletIndex, 1)
    },
    /**删除问题商品入库的缓存列表 */
    deleteproductHome(row) {
      let deletIndex = ''
      this.GoodsInStorage.forEach((item, index) => {
        if (item.skuNo == row.skuNo) {
          deletIndex = index
        }
      })
      this.GoodsInStorage.splice(deletIndex, 1)
    },
    /**获取并且显示入库产品弹框 */
    addWarehousedProduct() {
      this.WarehousedProductList = JSON.parse(JSON.stringify(this.FormData.orderSkuApplyList))
      this.WarehousedProduct = true
    },
  },
  watch: {
    'curentData.processingMethod': {
      deep: true,
      handler: function () {
        this.FormData = this.curentData
        if (this.FormData.processingMethod == '2') {
          /**首次自动生成sku费用列表 */
          this.getsupplier()
          if (this.FormData.status == 1) {
            this.initFirstFormData()
          }
        }

        // 处理(sku费用(退给卖家)总价的显示 别删了
        this.FormData.orderSkuReturnFeeList.forEach((item) => {
          item.total = item.num * Number(item.applyPrice).toFixed(0)
        })
      },
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0 10px;
}
.apply-main {
  width: 100%;
  border-radius: 8px;
  overflow: auto;
  & > .baseInfor {
    padding: 20px 30px;
  }
  & > .processMode {
    width: 100%;
    display: flex;
    justify-content: space-between;
    & > .processModeLeft {
      width: 85%;
      .step {
        display: flex;
        // margin-top: 20px;
        & > div {
          flex: 1;
          //   margin: 6px;
        }
      }
    }
    & > .processModeRight {
      padding: 40px 4px;
      width: 14%;
      display: flex;
      justify-content: center;
    }
  }
}
::v-deep .el-tabs__content {
  padding: 0 !important;
}
::v-deep .el-table__cell {
  padding: 0 !important;
}
.stepList {
  margin: 0 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  & > :nth-child(2) {
    width: 100%;
  }
  .stepHeader {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 20px;
  }
}
.bandingMachine {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10px 0 10px 10px;
  & > :nth-child(1) {
    text-align: center;
    width: 90px;
  }
  & > .el-input {
    width: 100px !important;
  }
}
// *******************************
.PagingList {
  ::v-deep .el-table--medium .el-table__cell {
    padding: 0 !important;
    line-height: 25px;
    height: 25px !important;
  }
  ::v-deep .el-button--medium {
    padding: 0 0px !important;
  }
  ::v-deep .pagination-container {
    height: 50px !important;
  }
}
@page {
  /* margin: 距离打印纸下边 右边 2mm 真实打印右边; */
  margin: 2mm 0px 4px 2px;
  width: 30mm;
  height: 20mm;
}
::v-deep .el-radio {
  margin-right: 10px;
}
.el-radio-group {
  margin-left: 16px;
}
</style>
